<template>
	<f-popup ref="popup" position="bottom">
		<view class="content">
			<view class="head-title">填写租赁表单</view>
			<scroll-view scroll-y style="height: 86vh;">
				<view class="info">
					<view v-if="schedule.rent_msg" class="status-hint">
						<view class="">{{schedule.rent_msg}}</view>
					</view>
					<view class="info-card flex flex-column">
						<view class="head-label">
							<text>选择您的校园服务商</text>
							<text style="color: red;">*</text>
						</view>
						<view class="item" @click="changeAgent">
							<view class="address">
								<view class="flex align-center">
									<view class="name">{{agentInfo.linkman}}</view>
									<!-- <view class="phone">{{agentInfo.phone}}</view> -->
								</view>
								<view class="detail">{{agentInfo.address}}</view>
							</view>
							<view class="iconfont icon-arrow-right"></view>
						</view>
					</view>
					<view class="info-card">
						<view class="flex align-center padding-b24">
							<view class="name flex-1">{{productInfo.title}}</view>
							<view class="radio flex align-center" @click="changeStyle">
								<view class="radio-option" :class="{'active-radio': formData.is_direct === 1}">
									<view v-if="formData.is_direct === 1" class="iconfont icon-check"></view>
									<view v-else class="iconfont icon-radio"></view>
								</view>
								<view class="padding-l12">平台直租</view>
							</view>
						</view>
						<view class="detail text-overflow-hidden-2">{{productInfo.desc}}</view>
						<view class="flex align-center justify-between" style="padding-top: 12rpx;">
							<view class="price flex-1" style="padding-top: 0;">
								<text class="price-symbol">¥</text>
								<text class="price-num">{{schedule.day_rent | formatPrice($formatPrice, '')}}</text>
								<!-- <text class="price-unit" style="color: black;padding-left: 4rpx;">起</text> -->
								<text class="price-unit">/天租价</text>
							</view>
						</view>
					</view>
					
					<view class="info-card">
						<view class="head-label">
							<text>租期</text>
							<text style="color: red;">*</text>
						</view>
						<view class="agent-num-tabs">
							<view class="agent-num-tab" :class="{'active-agent-num-tab': agentNum === 3}" @click="changeAgentNum(3)">1~3天</view>
							<view class="agent-num-tab" :class="{'active-agent-num-tab': agentNum === 7}" @click="changeAgentNum(7)">7天</view>
							<view class="agent-num-tab" :class="{'active-agent-num-tab': agentNum === 30}" @click="changeAgentNum(30)">30天</view>
							<view class="agent-num-tab" :class="{'active-agent-num-tab': agentNum === 9999}" @click="changeAgentNum(9999)">自选租期</view>
						</view>
						
					</view>

					<view v-if="agentNum === 9999" class="scroll">
						<com-calendar2 ref="calendar" :maxDays="schedule.max_rent_date" :range="schedule.is_rent_date" :selected="selected" :disabled-num="disabledNum"
							@change="changeDate"></com-calendar2>
					</view>
				</view>
				<view class="height-box">
					<view style="height: 82rpx;"></view>
				</view>

				<view class="footer-btns">
					<button class="confirm-btn flex-1" @click="submit">完成</button>
				</view>
			</scroll-view>
		</view>
	</f-popup>
</template>

<script>
	const checker = require("@/utils/checker.js");
	import formatPrice from '@/mixins/formatPrice.js';
	
	export default {
		props: {
			productGid: {
				type: String,
				default: ''
			},
			productInfo: {
				type: Object,
				default: ()=> {}
			}
		},
		mixins:[formatPrice],
		data() {
			return {
				selected: [],
				formData: {
					agent_gid: '', // string  服务商gid 必需 示例值: beb0f244-53d0-4743-98b6-5ded5320c046
					product_gid: '', // string  产品gid 必需 示例值: 4e084e97-a070-47a9-b155-4d3e5deb9cd3
					is_direct: 0, // string  必需 是否直租：0服务商；1平台直租
					start_rent_date: '', // string  必需 开始租赁日期
					end_rent_date: '', // string  必需 结束租赁日期
				},
				agentInfo: {},
				schedule: {},
				rule: [
					{ name: "start_rent_date",checkType: "notnull",checkRule: "",errorMsg: "请选择租赁日期" },
					{ name: "end_rent_date",checkType: "notnull",checkRule: "",errorMsg: "请选择结束租赁日期" },
				],
				agentNum: 0
			};
		},
		mounted() {
			this.formData.product_gid = this.productGid
		},
		methods: {
			// 改变租赁天数
			changeAgentNum(num) {
				if (this.formData.is_direct === 0 && this.schedule.is_rent_date.length === 0) {
					uni.showToast({
						icon: 'none',
						title: this.schedule.rent_msg
					})
					return
				}
				this.agentNum = num
				if (this.agentNum === 3 || this.agentNum === 7 || this.agentNum === 30) {
					this.formData.start_rent_date = this.schedule.is_rent_date[0]
					this.formData.end_rent_date = this.schedule.is_rent_date[this.agentNum-1]
				} else {
					this.formData.start_rent_date = ''
					this.formData.end_rent_date = ''
					this.selected = [];
				}
			},
			// 完成提交结算
			submit() {
				if (this.agentNum === 3 || this.agentNum === 7 || this.agentNum === 30) {
					this.formData.start_rent_date = this.schedule.is_rent_date[0]
					this.formData.end_rent_date = this.schedule.is_rent_date[this.agentNum-1]
				// } else {
				// 	this.formData.start_rent_date = this.schedule.is_rent_date[0]
				// 	this.formData.end_rent_date = this.schedule.is_rent_date[this.agentNum-1]
				}
				
				const checkRes = checker.check(this.formData, this.rule);
				if (checkRes) {
					this.handleSubmit()
				} else {
					uni.showToast({
						title: checker.error,
						icon: "none"
					});
				}
			},
			// 提交结算单
			handleSubmit() {
				uni.navigateTo({
					url: '/pages/order/submit/submit?formData='+encodeURIComponent(JSON.stringify(this.formData))
				})
				this.close()
			},
			// 选择日期
			changeDate(dates) {
				this.formData.start_rent_date = dates[0]
				this.formData.end_rent_date = dates[1]
				if (dates && dates.length > 1) {
					this.selected = dates;
				}
			},
			// 切换租赁方式
			changeStyle() {
				this.formData.is_direct = this.formData.is_direct === 1 ? 0 : 1
				this.userAgentOrderProductDate()
			},
			// 切换服务商
			changeAgent() {
				this.$emit('changeAgent')
			},
			// 服务商详情
			getAgentDetail() {
				this.$api.userAgentDetailsApi(this.formData.agent_gid).then(res=> {
					this.agentInfo = res.data
				}).catch(err=> {
					console.log('err', err);
				})
			},
			// 获取产品租赁价与档期
			userAgentOrderProductDate() {
				this.$api.userAgentOrderProductDateApi(this.formData).then(res=> {
					this.schedule = res.data
					this.$nextTick(()=> {
						if (this.$refs.calendar) {
							this.$refs.calendar.initSelectDate()
						}
					})
				}).catch(err=> {
					console.log('err', err);
				})
			},
			open(agent_gid) {
				this.agentNum = 0
				this.formData.agent_gid = agent_gid
				this.getAgentDetail()
				this.userAgentOrderProductDate()
				this.$refs.popup.open();
			},
			close() {
				this.$refs.popup.close();
			}
		}
	}
</script>

<style lang="scss" scoped>
	.content {
		width: 100%;

		background-color: #F6F6F6;
		border-top-left-radius: 26rpx;
		border-top-right-radius: 26rpx;


		.head-title {
			font-size: 34rpx;
			font-weight: 600;
			line-height: 46rpx;
			text-align: center;
			color: #000000;
			padding: 32rpx;
		}
		
		.status-hint {
			position: sticky;
			top: 0;
			z-index: 99;
			min-height: 96rpx;
			font-size: 26rpx;
			font-weight: 400;
			line-height: 36rpx;
			text-align: left;
			color: rgba(0, 0, 0, 0.6);
			background-color: #fff0ed;
			padding: 16rpx 32rpx;
			border-radius: 12rpx;
			box-sizing: border-box;
		
			display: flex;
			align-items: center;
		
			.icon-gantanhao {
				width: 32rpx;
				height: 32rpx;
				display: flex;
				align-items: center;
				justify-content: center;
		
				font-size: 32rpx;
				color: #D54941;
				margin-right: 16rpx;
			}
		
			.link-btn {
				position: absolute;
				right: 32rpx;
				font-size: 26rpx;
				font-weight: 400;
				line-height: 36rpx;
				text-align: left;
				color: rgba(0, 61, 153, 1);
			}
		}
		

		.info {
			display: flex;
			padding: 0 32rpx;
			padding-bottom: 42rpx;
			flex-direction: column;
			gap: 32rpx;

			.info-card {
				padding: 32rpx;
				border-radius: 26rpx;
				background-color: #FFFFFF;
				box-shadow: 0px 0px 33rpx rgba(0, 0, 0, 0.02);
			}

			.head-label {
				font-size: 28rpx;
				font-weight: 400;
				text-align: left;
				line-height: 44rpx;
				padding-bottom: 16rpx;
				color: rgba(0, 0, 0, 0.9);
			}

			.item {
				min-height: 48rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;
			}

			.label {
				font-size: 28rpx;
				font-weight: 500;
				line-height: 36rpx;
				text-align: left;
			}

			.tag {
				font-size: 20rpx;
				font-weight: 400;
				line-height: 28rpx;
				text-align: center;
				color: #FFFFFF;
				background-color: var(--primary-color);
				border-radius: 12rpx;
				padding: 4rpx 16rpx;
			}

			.name {
				font-size: 28rpx;
				font-weight: 500;
				line-height: 36rpx;
				text-align: left;
				padding-left: 8rpx;
			}
			
			.radio {
				
				.radio-option {
					display: flex;
					align-items: center;
					justify-content: space-between;
					// border-bottom: 1px solid rgba(0, 0, 0, 0.1);
					
					// height: 112rpx;
					font-size: 32rpx;
					font-weight: 400;
					text-align: left;
					line-height: 48rpx;
					color: rgba(0, 0, 0, 0.9);
					
					.iconfont {
						color: #DCDCDC;
						font-size: 42rpx;
					}
				}
				
				.active-radio {
					.iconfont {
						color: var(--primary-color);
					}
				}
			}

			.status {
				font-size: 24rpx;
				font-weight: 400;
				line-height: 32rpx;
				text-align: left;
				color: #FF0000;
			}

			.icon-duoxuanxuanzhong {
				font-size: 34rpx;
				color: rgba(0, 0, 0, 0.4);
			}

			.active-platform {
				color: #003D99;
			}

			.address {
				flex: 1;
				// padding: 0 32rpx;
				padding-right: 32rpx;

				.name {
					padding: 0;
					font-size: 32rpx;
					font-weight: 400;
					text-align: left;
					line-height: 48rpx;
				}

				.phone {
					font-size: 24rpx;
					font-weight: 400;
					line-height: 32rpx;
					text-align: left;
					color: #999999;
					padding-left: 16rpx;
				}

			}

			.detail {
				font-size: 24rpx;
				font-weight: 400;
				line-height: 32rpx;
				text-align: left;
				padding-top: 8rpx;
				color: rgba(0, 0, 0, 0.4);
			}

			.price {
				display: flex;
				padding-top: 20rpx;
				align-items: flex-end;
			}

			.price-symbol {
				font-size: 22rpx;
				font-weight: 600;
				line-height: 32rpx;
				text-align: left;
				color: #FF0000;
			}

			.price-num {
				font-size: 28rpx;
				font-weight: 700;
				line-height: 32rpx;
				text-align: left;
				color: #FF0000;
			}

			.price-unit {
				font-size: 14rpx;
				font-weight: 600;
				line-height: 24rpx;
				text-align: left;
				color: rgba(0, 0, 0, 0.5);
			}
			
			.agent-num-tabs {
				display: flex;
				flex-wrap: wrap;
				align-items: center;
				gap: 24rpx;
				
				.agent-num-tab {
					padding: 8rpx 32rpx;
					border-radius: 999px;
					background: rgba(0, 0, 0, 0.1);
					
					font-size: 28rpx;
					font-weight: 400;
					line-height: 36rpx;
				}
				
				.active-agent-num-tab {
					color: #FFFFFF;
					background: var(--gradient-color-vertical);
				}
			}
		}

		.input-number {
			width: 160rpx;
			display: flex;
			align-items: center;

			font-size: 28rpx;
			font-weight: 500;
			line-height: 36rpx;

			.num-input {
				flex: 1;
				padding: 0 16rpx;

				input {
					font-size: 28rpx;
					font-weight: 500;
					text-align: center;
				}
			}

			.icon-jian1 {
				width: 42rpx;
				height: 42rpx;
				display: flex;
				font-weight: bold;
				align-items: center;
				justify-content: center;
			}

			.icon-tianjia_huaban {
				width: 42rpx;
				height: 42rpx;
				display: flex;
				font-weight: bold;
				align-items: center;
				justify-content: center;
			}
		}

		.icon-arrow-right {
			font-size: 18rpx;
			margin-left: 12rpx;
		}


		.scroll {
			width: 100%;
			padding: 8rpx;
			box-sizing: border-box;
			border-radius: 26rpx;
			background-color: #FFFFFF;
			box-shadow: 0px 0px 33rpx rgba(0, 0, 0, 0.02);
		}

		.height-box {
			padding: 20rpx 32rpx;
			box-sizing: border-box;
			// background-color: #FFFFFF;
			padding-bottom: calc(20rpx + constant(safe-area-inset-bottom)); ///兼容 IOS<11.2/
			padding-bottom: calc(20rpx + env(safe-area-inset-bottom)); ///兼容 IOS>11.2/
		}

		.footer-btns {
			position: fixed;
			left: 0;
			right: 0;
			bottom: 0;
			width: 100%;
			z-index: 999;
			padding: 20rpx 32rpx;
			box-sizing: border-box;
			background-color: #FFFFFF;
			box-shadow: 0px 0px 33rpx rgba(0, 0, 0, 0.05);
			padding-bottom: calc(20rpx + constant(safe-area-inset-bottom)); ///兼容 IOS<11.2/
			padding-bottom: calc(20rpx + env(safe-area-inset-bottom)); ///兼容 IOS>11.2/

			display: flex;
			align-items: center;
			gap: 80rpx;

			.submit-btn {
				flex: 1;
				margin: 0;
				padding: 0;
				height: 82rpx;
				border-radius: 26rpx;
				background: var(--gradient-color-vertical);

				font-size: 34rpx;
				font-weight: 400;
				line-height: 82rpx;
				text-align: center;
				color: #FFFFFF;

				&::after {
					border: none;
				}
			}
		}
	}
</style>